<template>
  <div style="background-color: #ecf0f1; height: 100vh">
    <top :active="active"></top>
    <div class="body">
      <div class="tar" style="background-color: #f5f5f5">
        <div style="height: 36vh">
          <img :src="obj.avatar" class="img" @click="changeVatar" />
          <input
            type="file"
            class="input"
            style="opacity: 0"
            @change="imgchange"
          />
        </div>
        <el-menu
          style="background-color: #f5f5f5"
          default-active="1"
          class="el-menu-vertical-demo"
        >
          <el-menu-item index="1" @click="user">
            <i class="el-icon-user"></i>
            <span slot="title">用户资料</span>
          </el-menu-item>
          <el-menu-item index="2" @click="capital">
            <i class="el-icon-document"></i>
            <span slot="title">资金信息</span>
          </el-menu-item>
          <el-menu-item index="3" @click="order">
            <i class="el-icon-goods"></i>
            <span slot="title">我的订单</span>
          </el-menu-item>
          <el-menu-item index="4" @click="address">
            <i class="el-icon-setting"></i>
            <span slot="title">我的地址</span>
          </el-menu-item>
          <el-menu-item index="5" @click="service">
            <i class="el-icon-scissors"></i>
            <span slot="title">保修记录</span>
          </el-menu-item>
          <el-menu-item index="7" @click="Maintenance">
            <i class="el-icon-scissors"></i>
            <span slot="title">维修</span>
          </el-menu-item>
          <el-menu-item index="6" @click="information">
            <i class="el-icon-scissors"></i>
            <span slot="title">公司信息</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="content" v-if="show == '1'">
        <div class="user" style="display: flex; justify-content: space-between">
          用户资料
          <div>
            <el-button type="primary" @click="loginOut">退出登录</el-button>
            <el-button
              type="primary"
              style="margin-right: 3vw"
              @click="dialogFormVisible = true"
              >修改信息</el-button
            >
          </div>
        </div>
        <div class="one" style="margin-top: 20px;b">
          <div>名称</div>
          <div>{{ obj.username }}</div>
        </div>
        <div class="one">
          <div>手机</div>
          <div>{{ obj.phone }}</div>
        </div>
        <div class="one" style="border-bottom: none">
          <div>邮箱</div>
          <div>{{ obj.email }}</div>
        </div>
        <!-- 测试 -->
        <!-- <getorder
          v-for="(item, index) in 19"
          :key="index"
          :data="item"
        ></getorder> -->
      </div>
      <div class="content" v-else-if="show == '2'">
        <div class="user" style="display: flex; justify-content: space-between">
          资金信息
          <div>
            <el-button type="primary" @click="dialogFormVisible2 = true"
              >绑定银行卡</el-button
            >
            <el-button type="primary" style="margin-right: 3vw" @click="open"
              >充值</el-button
            >
          </div>
        </div>
        <div
          style="
            width: 100%;
            height: 6vh;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="money">
            <div>账户余额(元)</div>
            <div>{{ bank.money }}</div>
          </div>
          <div class="bank">
            <img
              src="@/assets/2.png"
              v-if="bank.bank == '2'"
              class="img1"
              alt=""
            />
            <img
              src="@/assets/3.png"
              v-if="bank.bank == '3'"
              class="img1"
              alt=""
            />
            <img
              src="@/assets/4.png"
              v-if="bank.bank == '1'"
              class="img1"
              alt=""
            />
            <div v-if="bank.bank == '1'">中国银行:</div>
            <div v-if="bank.bank == '2'">中国建设银行:</div>
            <div v-if="bank.bank == '3'">中国农业银行:</div>
            <div v-if="!bank.bank">尚未绑定银行卡</div>
            <div style="margin-left: 10px; margin-right: 50px">
              {{ bank.card }}
            </div>
            <button v-if="bank.bank" @click="changeBank">更换银行卡</button>
          </div>
        </div>
      </div>
      <div class="content" v-else-if="show == '3'">
        <div class="user">我的订单</div>
        <div style="height: 72vh; overflow-y: scroll">
          <div
            v-for="item in orderList"
            :key="item.id"
            style="
              display: flex;
              align-items: center;
              height: 100px;
              width: 100%;
              border: 1px solid #ccc;
              padding-left: 10px;
            "
          >
            <img
              :src="item.imgurl"
              alt=""
              style="width: 90px; height: 90px; margin-right: 10px"
            />
            <div style="margin-right: 10px; width: 25%">
              <div>商品名称：{{ item.shopnames }}</div>
              <div>商品单价：{{ item.price }}</div>
              <div>购买数量：{{ item.counts }}</div>
            </div>
            <div style="margin-right: 10px; width: 28%">
              <div>购买时间：{{ item.olderTime }}</div>
              <div>收货地址：{{ item.address }}</div>
              <div>联系电话：{{ item.phone }}</div>
            </div>
            <div style="margin-right: 10px; width: 12%">
              <div>收货人：{{ item.name }}</div>
              <div>订单金额：{{ item.total }}</div>
              <div v-if="item.status == 0">订单状态: 已下单</div>
              <div v-if="item.status == 1">订单状态: 已发出</div>
              <div v-if="item.status == 2">订单状态: 取消订单</div>
              <div v-if="item.status == 3">订单状态: 签收</div>
              <div v-if="item.status == 4">订单状态: 已退款</div>
              <div v-if="item.status == 6">订单状态: 已退货已退款</div>
            </div>
            <div>
              <button
                v-if="item.status == 1"
                @click="btn(item, 3)"
                style="margin-right: 10px"
              >
                签收
              </button>
            </div>
            <div>
              <button
                v-if="item.status == 0 || item.status == 1"
                @click="btn(item, 2)"
              >
                取消订单
              </button>
              <button
                v-if="item.status == 3"
                @click="btn(item, 1)"
                style="margin-right: 10px"
              >
                保修寄回
              </button>
              <!-- <button
                v-if="item.status == 3"
                @click="Maintenancebtn(item)"
                style="margin-right: 10px"
              >
                维修
              </button> -->
              <button
                v-if="item.repairStatus == 0 && item.status == 3"
                @click="btn(item, 5)"
              >
                退货退款
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="content" v-else-if="show == '4'">
        <div
          class="user"
          style="
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
          "
        >
          我的地址
          <el-button type="primary" @click="addAddress">新增地址</el-button>
        </div>
        <div class="address" v-for="item in addressList" :key="item.id">
          <div style="width: 10%; display: flex; justify-content: center">
            <div
              v-if="item.active == 0"
              style="
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 1px solid #000;
              "
              @click="choiceAddress(item)"
            ></div>
            <div
              v-if="item.active == 1"
              style="
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 1px solid #000;
                background: #409eff;
              "
              @click="choiceAddress(item)"
            ></div>
          </div>
          <div style="display: flex; width: 74%">
            <div style="margin-right: 20px">收货人:{{ item.name }}</div>
            <div style="margin-right: 20px">联系电话:{{ item.phone }}</div>
            <div style="margin-right: 20px">收货地址:{{ item.address }}</div>
          </div>
          <div style="width: 16%; display: flex">
            <button @click="changeaddress(item)" style="margin-right: 20px">
              修改地址
            </button>
            <button @click="deladdress(item)">删除地址</button>
          </div>
        </div>
      </div>
      <div class="content" v-else-if="show == '6'">
        <div class="user">保修订单</div>
        <div style="height: 72vh; overflow-y: scroll">
          <div
            v-for="item in Repairlist"
            :key="item.id"
            style="
              display: flex;
              align-items: center;
              height: 100px;
              width: 100%;
              border: 1px solid #ccc;
              padding-left: 10px;
            "
          >
            <div style="margin-right: 30px; width: 25%; margin-left: 20px">
              <div>商品名称：{{ item.shopnames }}</div>
              <div>商品品牌：{{ item.brand }}</div>
            </div>
            <div style="margin-right: 30px; width: 30%">
              <div>商品类型：{{ item.type }}</div>
              <div>时间：{{ item.times }}</div>
              <!-- <div>保修原因：{{ item.reason }}</div> -->
              <!-- <div>联系电话：{{ item.phone }}</div> -->
            </div>
            <div style="margin-right: 30px; width: 12%">
              <div v-if="item.status == 1">订单状态: 已发出</div>
              <div v-if="item.status == 2">订单状态: 商家已签收</div>
              <div v-if="item.status == 3">订单状态: 商家已发出</div>
              <div v-if="item.status == 4">订单状态: 已签收</div>
            </div>
            <div>
              <button @click="btn111(item)" style="margin-right: 10px">
                详情
              </button>
              <button
                v-if="item.status == 3"
                @click="btn111(item, 4)"
                style="margin-right: 10px"
              >
                签收
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="content" v-else-if="show == '8'">
        <!-- <div class="user">维修单</div> -->
        <div
          class="user"
          style="
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
          "
        >
          维修单
          <el-button type="primary" @click="Maintenancebtn"
            >新增维修单</el-button
          >
        </div>
        <div style="height: 72vh; overflow-y: scroll">
          <div
            v-for="item in MaintenanceList"
            :key="item.id"
            style="
              display: flex;
              align-items: center;
              height: 100px;
              width: 100%;
              border: 1px solid #ccc;
              padding-left: 10px;
            "
          >
            <div style="margin-right: 30px; width: 25%; margin-left: 20px">
              <div>商品名称：{{ item.shopnames }}</div>
              <div>商品品牌：{{ item.brand }}</div>
            </div>
            <div style="margin-right: 30px; width: 30%">
              <!-- <div>商品类型：{{ item.type }}</div> -->
              <div>时间：{{ item.times }}</div>
              <!-- <div>保修原因：{{ item.reason }}</div> -->
              <div>联系电话：{{ item.phone }}</div>
            </div>
            <div style="margin-right: 30px; width: 12%">
              <div v-if="item.status == 1">订单状态: 已发出</div>
              <div v-if="item.status == 2">订单状态: 商家已签收</div>
              <div v-if="item.status == 3">订单状态: 商家已发出</div>
              <div v-if="item.status == 4">订单状态: 已签收</div>
            </div>
            <div>
              <button @click="btn22(item)" style="margin-right: 10px">
                详情
              </button>
              <!-- <button
                v-if="item.status == 4"
                @click="btn22(item, 4)"
                style="margin-right: 10px"
              >
                签收
              </button> -->
            </div>
          </div>
        </div>
      </div>
      <div class="content" v-else-if="show == '7'">
        <div class="user">公司信息</div>
        <div class="one" style="margin-top: 20px">
          <div>所在地区</div>
          <div>湖南省益阳市赫山区金银山街道</div>
        </div>
        <div class="one">
          <div>详细地址</div>
          <div>桃花仑西路653号益阳网联电脑有限公司</div>
        </div>
        <div class="one">
          <div>地区区号</div>
          <div>0737</div>
        </div>
        <div class="one" style="border-bottom: none">
          <div>客服热线</div>
          <div>15197710088</div>
        </div>
      </div>
    </div>

    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="名称">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quit">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="保修单" :visible.sync="formLabelAlignVisible">
      <div style="margin-top: 20px">
        <el-form
          :label-position="labelPosition"
          label-width="300px"
          :model="formLabelAlign"
          ref="ruleForm"
          :rules="rules"
        >
          <el-form-item label="电脑类型" style="width: 70%" prop="type">
            <el-input v-model="formLabelAlign.type"></el-input>
          </el-form-item>
          <el-form-item label="维修原因" style="width: 70%" prop="reason">
            <el-input
              type="textarea"
              v-model="formLabelAlign.reason"
            ></el-input>
          </el-form-item>
          <el-form-item label="快递单号" style="width: 70%" prop="passld">
            <el-input v-model="formLabelAlign.passld"></el-input>
          </el-form-item>
          <el-form-item label="快递公司" style="width: 70%" prop="passName">
            <el-input v-model="formLabelAlign.passName"></el-input>
          </el-form-item>
          <el-form-item label="品牌" style="width: 70%" prop="brand">
            <el-input v-model="formLabelAlign.brand"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" style="width: 70%" prop="shopnames">
            <el-input v-model="formLabelAlign.shopnames"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="color: red">
              若电脑修改寄回，按照个人默认收获地址寄出
            </div>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <el-dialog title="维修单" :visible.sync="MaintenanceVisible">
      <div style="margin-top: 20px">
        <el-form
          :label-position="labelPosition"
          label-width="300px"
          :model="MaintenanceForm"
          ref="ruleForm"
          :rules="rules1"
        >
          <el-form-item label="维修原因" style="width: 70%" prop="reason">
            <el-input
              type="textarea"
              v-model="MaintenanceForm.reason"
            ></el-input>
          </el-form-item>
          <el-form-item label="快递单号" style="width: 70%" prop="passId">
            <el-input v-model="MaintenanceForm.passId"></el-input>
          </el-form-item>
          <el-form-item label="快递公司" style="width: 70%" prop="passName">
            <el-input v-model="MaintenanceForm.passName"></el-input>
          </el-form-item>
          <el-form-item label="品牌" style="width: 70%" prop="brand">
            <el-input v-model="MaintenanceForm.brand"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" style="width: 70%" prop="shopnames">
            <el-input v-model="MaintenanceForm.shopnames"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="color: red">
              若电脑修改寄回，按照个人默认收获地址寄出
            </div>
            <el-button type="primary" @click="submitMaintenanceForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetMaintenanceForm('ruleForm')"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <el-dialog title="退货单" :visible.sync="returnVisible">
      <div style="margin-top: 20px">
        <el-form
          :label-position="labelPosition"
          label-width="300px"
          :model="formreturn"
          ref="returnruleForm"
          :rules="returnrules"
        >
          <el-form-item label="快递单号" style="width: 70%" prop="passld">
            <el-input v-model="formreturn.passId"></el-input>
          </el-form-item>
          <el-form-item label="快递公司" style="width: 70%" prop="passName">
            <el-input v-model="formreturn.passName"></el-input>
          </el-form-item>
          <el-form-item label="品牌" style="width: 70%" prop="brand">
            <el-input v-model="formreturn.brand"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" style="width: 70%" prop="shopnames">
            <el-input v-model="formreturn.shopnames"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitFormreturn('returnruleForm')"
              >提交</el-button
            >
            <el-button @click="resetFormreturn('returnruleForm')"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="quit">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div> -->
    </el-dialog>

    <el-dialog title="修改地址" :visible.sync="receiptShow">
      <el-form :model="form">
        <el-form-item label="收货人">
          <el-input v-model="receipt.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input v-model="receipt.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="receipt.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quitreceipt">取 消</el-button>
        <el-button type="primary" @click="surereceipt">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增地址" :visible.sync="addressShow">
      <el-form :model="addressform">
        <el-form-item label="收货人">
          <el-input v-model="addressform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input v-model="addressform.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="addressform.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quitaddress">取 消</el-button>
        <el-button type="primary" @click="submitAddress">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="充值" :visible.sync="dialogFormVisible1">
      <el-dialog
        title="支付"
        width="30%"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-input
          placeholder="请输入支付密码"
          v-model="password"
          class="input-with-select"
          show-password
        >
        </el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="quit3">取 消</el-button>
          <el-button type="primary" @click="sure3">确 定</el-button>
        </div>
      </el-dialog>
      <el-input
        placeholder="请输入卡号"
        v-model="RechargeForm.card"
        class="input-with-select"
        style="margin: 0 0 2vw"
      >
        <el-select
          v-model="RechargeForm.bank"
          slot="prepend"
          placeholder="请选择银行"
        >
          <el-option label="中国银行" value="1"></el-option>
          <el-option label="中国建设银行" value="2"></el-option>
          <el-option label="中国农业银行" value="3"></el-option>
        </el-select>
      </el-input>
      <el-input
        placeholder="请输入金额"
        v-model="RechargeForm.money"
        class="input-with-select"
      >
      </el-input>

      <div slot="footer" class="dialog-footer">
        <el-button @click="quit1">取 消</el-button>
        <el-button type="primary" @click="sure1">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="更换银行卡" :visible.sync="changbank">
      <el-input
        placeholder="请输入卡号"
        v-model="changbankForm.card"
        class="input-with-select"
        style="margin: 0 0 2vw"
      >
        <el-select
          v-model="changbankForm.bank"
          slot="prepend"
          placeholder="请选择银行"
        >
          <el-option label="中国银行" value="1"></el-option>
          <el-option label="中国建设银行" value="2"></el-option>
          <el-option label="中国农业银行" value="3"></el-option>
        </el-select>
      </el-input>

      <div slot="footer" class="dialog-footer">
        <el-button @click="quitchange">取 消</el-button>
        <el-button type="primary" @click="surechange">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="绑定银行卡" :visible.sync="dialogFormVisible2">
      <el-input
        placeholder="请输入卡号"
        v-model="bankForm.card"
        class="input-with-select"
        style="margin: 0 0 2vw"
      >
        <el-select
          v-model="bankForm.bank"
          slot="prepend"
          placeholder="请选择银行"
        >
          <el-option label="中国银行" value="1"></el-option>
          <el-option label="中国建设银行" value="2"></el-option>
          <el-option label="中国农业银行" value="3"></el-option>
        </el-select>
      </el-input>
      <el-input
        placeholder="请输入支付密码"
        v-model="bankForm.payword"
        class="input-with-select"
      >
      </el-input>

      <div slot="footer" class="dialog-footer">
        <el-button @click="quit2">取 消</el-button>
        <el-button type="primary" @click="sure2">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="商品评分" :visible.sync="evaluate">
      <el-form :model="evaluateForm">
        <el-form-item label="评论">
          <el-input
            v-model="evaluateForm.comment"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-rate v-model="evaluateForm.status" :max="3"></el-rate>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quitevaluate">取 消</el-button>
        <el-button type="primary" @click="sureevaluate">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="保修单详情" :visible.sync="serviceVisible">
      <el-steps
        :space="200"
        :active="serviceStatus"
        finish-status="success"
        align-center
      >
        <el-step title="已寄出"></el-step>
        <el-step title="商家收到货"></el-step>
        <el-step title="商家寄出"></el-step>
        <el-step title="已签收"></el-step>
      </el-steps>
      <div style="margin-top: 20px; margin-left: 80px">
        保修原因:{{ reason }}
      </div>
      <div style="margin-top: 20px; margin-left: 80px">
        商家回复:{{ reports }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="serviceVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="维修单详情" :visible.sync="serviceVisible1">
      <el-steps
        :space="200"
        :active="serviceStatus1"
        finish-status="success"
        align-center
      >
        <el-step title="已寄出"></el-step>
        <el-step title="商家收到货"></el-step>
        <el-step title="商家寄出"></el-step>
        <el-step title="已签收"></el-step>
      </el-steps>
      <div style="margin-top: 20px; margin-left: 80px">
        保修原因:{{ reason1 }}
      </div>
      <div style="margin-top: 20px; margin-left: 80px">
        商家回复:{{ answer1 }}
      </div>
      <div style="margin-top: 20px; margin-left: 80px" v-if="status1 == 3">
        维修金额:{{ price1 }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="serviceVisible1 = false"
          v-if="status1 != 3"
          >确 定</el-button
        >
        <el-button type="primary" @click="payment" v-if="status1 == 3"
          >确认付款并签收</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="确认支付" :visible.sync="serviceVisible2">
      <el-input
        placeholder="请输入支付密码"
        v-model="payword1"
        class="input-with-select"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="paySure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import top from "@/components/top/index.vue";
import getorder from "@/components/getorder/index";
import {
  getUser,
  updatePerson,
  personMoney,
  postUsermoney,
  postMoney,
  getMyaddress,
  changeCard,
  addPersonAddress,
  changeActives,
  updatePerAddress,
  deleterPerAdd,
  personOrder,
  changeGoods,
  personEvaluate,
  addRepair,
  getShopId,
  getRepairlist,
  postSalesVolume,
  bossUpdateRepiar,
  addReturnlist,
  addFixList,
  getFixPerson,
  payFixed,
  updateFixStatus,
  afterRepair,
} from "@/api/login";
import axios from "axios";
export default {
  components: { top, getorder },
  data() {
    return {
      returnVisible: false,
      formLabelAlignVisible: false,
      serviceStatus: 1,
      serviceVisible: false,
      evaluate: false,
      evaluateForm: {
        comment: "",
        status: 0,
        id: "",
        username: "",
        times: "",
      },
      rules: {
        type: [{ required: true, message: "请输入电脑类型", trigger: "blur" }],
        reason: [
          { required: true, message: "请输入维修原因", trigger: "blur" },
        ],
        brand: [{ required: true, message: "请输入商品品牌", trigger: "blur" }],
        shopnames: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        passld: [
          { required: true, message: "请输入快递单号", trigger: "blur" },
        ],
        passName: [
          { required: true, message: "请输入快递公司", trigger: "blur" },
        ],
      },
      rules1: {
        reason: [
          { required: true, message: "请输入维修原因", trigger: "blur" },
        ],
        brand: [{ required: true, message: "请输入商品品牌", trigger: "blur" }],
        shopnames: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        passId: [
          { required: true, message: "请输入快递单号", trigger: "blur" },
        ],
        passName: [
          { required: true, message: "请输入快递公司", trigger: "blur" },
        ],
      },
      returnrules: {
        brand: [{ required: true, message: "请输入快递单号", trigger: "blur" }],
        shopnames: [
          { required: true, message: "请输入收货地址", trigger: "blur" },
        ],
        passId: [
          { required: true, message: "请输入快递单号", trigger: "blur" },
        ],
        passName: [
          { required: true, message: "请输入快递公司", trigger: "blur" },
        ],
      },
      labelPosition: "right",
      formLabelAlign: {
        reason: "",
        type: "",
        brand: "",
        shopnames: "",
        passName: "",
        passld: "",
      },
      formreturn: {
        brand: "",
        shopnames: "",
        passName: "",
        passId: "",
      },
      imageUrl: "",
      show: "1",
      additionalData: {
        // 这里添加你需要附加的参数
        filename: "",
        username: "",
      },
      active: "2",
      imageUrl: "",
      headers: {
        "Content-Type": "multipart/form-data",
        Authorization: localStorage.getItem("myToken"),
      },
      imgObjs: {},
      imgObjs1: {},
      obj: {},
      form: {
        username: "",
        phone: "",
        email: "",
        password: "",
      },
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      changbank: false,
      addressShow: false,
      receiptShow: false,
      bank: {},
      bankForm: {
        card: "",
        bank: "",
        payword: "",
      },
      RechargeForm: {
        card: "",
        bank: "",
        money: "",
        payword: "",
      },
      innerVisible: false,
      password: "",
      username: localStorage.getItem("myname"),
      changbankForm: {
        bank: "",
        card: "",
      },
      addressform: {
        name: "",
        address: "",
        phone: "",
      },
      addressList: [],
      receipt: {
        name: "",
        phone: "",
        address: "",
        id: "",
      },
      orderForm: {
        pageNo: 1,
        pageSize: 10,
      },
      orderList: [],
      total: "",
      Repairlist: [],
      reason: "",
      reports: "",
      MaintenanceForm: {
        passId: "",
        username: "",
        passName: "",
        brand: "",
        shopnames: "",
        times: "",
        reason: "",
      },
      money111: "",
      MaintenanceVisible: false,
      MaintenanceList: [],
      serviceVisible1: false,
      serviceVisible2: false,
      reason1: "",
      reports1: "",
      serviceStatus1: "",
      status1: "",
      payword1: "",
      answer1: "",
      price1: "",
      id1: "",
    };
  },

  beforeCreate() {
    if (!localStorage.getItem("myToken")) {
      this.$router.push("/userLogin");
    }
  },
  created() {
    this.getUser();
  },
  methods: {
    payment() {
      personMoney({ username: localStorage.getItem("myname") }).then((res) => {
        console.log(res);
        res.data.money = parseInt(res.data.money);
        if (res.code == 200) {
          if (res.data.money == NaN) {
            res.data.money = 0;
          }
          this.money111 = res.data.money;
        } else {
          this.money111 = 0;
        }
      });
      this.serviceVisible2 = true;
    },
    paySure() {
      let that = this;
      if (this.money111 >= this.price1) {
        payFixed({
          username: localStorage.getItem("myname"),
          payword: this.payword1,
          money: this.price1,
        }).then((res) => {
          if (res.code == 200) {
            updateFixStatus({ id: this.id1, status: 4 }).then((res) => {
              if (res.code == 200) {
                getFixPerson({
                  username: localStorage.getItem("myname"),
                  type: 1,
                }).then((res) => {
                  if (res.code == 200) {
                    that.MaintenanceList = res.data.data || [];
                  }
                });
                that.serviceVisible1 = false;
              }
            });
            this.$message.success(res.msg);
            this.serviceVisible2 = false;
          }
        });
      } else {
        this.$message.error("余额不足");
      }
    },
    btn22(item, e) {
      console.log(item);
      this.id1 = item.id;
      if (!e) {
        this.reason1 = item.reason || "";
        this.reports1 = item.reports || "";
        this.status1 = item.status || "";
        this.answer1 = item.answer || "";
        this.price1 = item.price || "";
        this.serviceStatus1 = Number(item.status) || 1;
        this.serviceVisible1 = true;
      } else {
        updateFixStatus({ id: this.id1, status: 5 }).then((res) => {
          if (res.code == 200) {
            this.$message.success("签收成功");
            getFixPerson({
              username: localStorage.getItem("myname"),
              type: 1,
            }).then((res) => {
              if (res.code == 200) {
                that.MaintenanceList = res.data.data || [];
              }
            });
          }
        });
      }
    },
    Maintenance() {
      this.show = "8";
      getFixPerson({
        username: localStorage.getItem("myname"),
        type: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.MaintenanceList = res.data.data || [];
        }
      });
    },
    Maintenancebtn(e) {
      this.MaintenanceForm.username = localStorage.getItem("myname");
      this.MaintenanceVisible = true;
    },
    information() {
      this.show = "7";
    },
    btn111(item, e) {
      if (e == 4) {
        bossUpdateRepiar({ id: item.id, status: e }).then((res) => {
          if (res.code == 200) {
            this.$message.success("签收成功");
            getRepairlist({
              username: localStorage.getItem("myname"),
              type: "1",
            }).then((res) => {
              if (res.code == 200) {
                this.Repairlist = res.data.data || [];
              }
            });
          }
        });
      } else {
        this.reason = item.reason || "";
        this.reports = item.reports || "";
        this.serviceStatus = Number(item.status) || 1;
        this.serviceVisible = true;
      }
    },
    // 维修
    service() {
      this.show = "6";
      getRepairlist({
        username: localStorage.getItem("myname"),
        type: "1",
      }).then((res) => {
        if (res.code == 200) {
          this.Repairlist = res.data.data || [];
        }
      });
    },
    sureevaluate() {
      // 获取当前时间的时间戳（以毫秒为单位）
      let currentTimestamp = new Date().getTime();

      // 创建一个Date对象并传入当前时间戳
      let currentDate = new Date(currentTimestamp);

      // 获取年、月、日、时、分、秒
      let year = currentDate.getFullYear();
      let month = ("0" + (currentDate.getMonth() + 1)).slice(-2); // 月份从0开始，所以要加1，然后补零
      let day = ("0" + currentDate.getDate()).slice(-2); // 补零
      let hours = ("0" + currentDate.getHours()).slice(-2); // 补零
      let minutes = ("0" + currentDate.getMinutes()).slice(-2); // 补零
      let seconds = ("0" + currentDate.getSeconds()).slice(-2); // 补零

      // 将结果拼接成想要的格式
      let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      this.evaluateForm.times = formattedDate;
      if (this.evaluateForm.status >= 2) {
        this.evaluateForm.status = 1;
      } else {
        this.evaluateForm.status = 0;
      }
      personEvaluate(this.evaluateForm).then((res) => {
        if (res.code == 200) {
          this.$message.success("评论成功");
          this.evaluate = false;
          this.evaluateForm = {
            comment: "",
            status: 0,
            username: "",
            times: "",
            shopnames: "",
            id: "",
          };
        }
      });
    },
    quitevaluate() {
      this.evaluate = false;
      this.evaluateForm = {
        comment: "",
        status: 0,
        id: "",
        username: "",
        times: "",
      };
    },
    submitMaintenanceForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 获取当前时间的时间戳（以毫秒为单位）
          let currentTimestamp = new Date().getTime();

          // 创建一个Date对象并传入当前时间戳
          let currentDate = new Date(currentTimestamp);

          // 获取年、月、日、时、分、秒
          let year = currentDate.getFullYear();
          let month = ("0" + (currentDate.getMonth() + 1)).slice(-2); // 月份从0开始，所以要加1，然后补零
          let day = ("0" + currentDate.getDate()).slice(-2); // 补零
          let hours = ("0" + currentDate.getHours()).slice(-2); // 补零
          let minutes = ("0" + currentDate.getMinutes()).slice(-2); // 补零
          let seconds = ("0" + currentDate.getSeconds()).slice(-2); // 补零

          // 将结果拼接成想要的格式
          let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
          this.MaintenanceForm.times = formattedDate;
          addFixList(this.MaintenanceForm).then((res) => {
            if (res.code == 200) {
              this.$message.success("提交成功");
              this.MaintenanceVisible = false;
              this.MaintenanceForm = {
                reason: "",
                brand: "",
                shopnames: "",
                passName: "",
                passId: "",
              };
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetMaintenanceForm(formName) {
      this.$refs[formName].resetFields();
      this.MaintenanceVisible = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 获取当前时间的时间戳（以毫秒为单位）
          let currentTimestamp = new Date().getTime();

          // 创建一个Date对象并传入当前时间戳
          let currentDate = new Date(currentTimestamp);

          // 获取年、月、日、时、分、秒
          let year = currentDate.getFullYear();
          let month = ("0" + (currentDate.getMonth() + 1)).slice(-2); // 月份从0开始，所以要加1，然后补零
          let day = ("0" + currentDate.getDate()).slice(-2); // 补零
          let hours = ("0" + currentDate.getHours()).slice(-2); // 补零
          let minutes = ("0" + currentDate.getMinutes()).slice(-2); // 补零
          let seconds = ("0" + currentDate.getSeconds()).slice(-2); // 补零

          // 将结果拼接成想要的格式
          let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
          this.formLabelAlign.times = formattedDate;
          addRepair(this.formLabelAlign).then((res) => {
            if (res.code == 200) {
              this.$message.success("提交成功");
              afterRepair({ id: this.formLabelAlign.id }).then((res) => {
                if (res.code == 200) {
                  this.getpersonOrder();
                }
              });
              this.formLabelAlignVisible = false;
              this.formLabelAlign = {
                reason: "",
                type: "",
                brand: "",
                shopnames: "",
                passName: "",
                passld: "",
              };
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitFormreturn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 获取当前时间的时间戳（以毫秒为单位）
          let currentTimestamp = new Date().getTime();

          // 创建一个Date对象并传入当前时间戳
          let currentDate = new Date(currentTimestamp);

          // 获取年、月、日、时、分、秒
          let year = currentDate.getFullYear();
          let month = ("0" + (currentDate.getMonth() + 1)).slice(-2); // 月份从0开始，所以要加1，然后补零
          let day = ("0" + currentDate.getDate()).slice(-2); // 补零
          let hours = ("0" + currentDate.getHours()).slice(-2); // 补零
          let minutes = ("0" + currentDate.getMinutes()).slice(-2); // 补零
          let seconds = ("0" + currentDate.getSeconds()).slice(-2); // 补零

          // 将结果拼接成想要的格式
          let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
          this.formreturn.times = formattedDate;
          addReturnlist(this.formreturn).then((res) => {
            if (res.code == 200) {
              changeGoods({
                id: this.formreturn.id,
                btn: this.formreturn.btn,
              }).then((res) => {
                if (res.code == 200) {
                  this.$message.success("退货退款成功");
                  this.getpersonOrder();
                  this.returnVisible = false;
                }
              });
              this.formreturn = {
                brand: "",
                shopnames: "",
                passName: "",
                passId: "",
              };
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.formLabelAlignVisible = false;
    },
    resetFormreturn(formName) {
      this.$refs[formName].resetFields();
      this.returnVisible = false;
    },
    btn(item, e) {
      this.formreturn.username = item.username;
      this.formreturn.id = item.id;
      this.formreturn.btn = e;

      this.formreturn.shopnames = item.shopnames;
      this.evaluateForm.username = item.username;
      this.evaluateForm.id = item.id;
      this.evaluateForm.shopnames = item.shopnames;
      this.formLabelAlign.username = item.username;
      this.formLabelAlign.shopnames = item.shopnames;
      this.formLabelAlign.id = item.id;
      if (e == 5) {
        this.returnVisible = true;
      } else if (e == 1) {
        this.formLabelAlignVisible = true;
      } else {
        changeGoods({ id: item.id, btn: e }).then((res) => {
          if (res.code == 200) {
            if (e == 3) {
              this.$message.success("成功签收");
              postSalesVolume({
                shopnames: item.shopnames,
                counts: item.counts,
              });
              getShopId({ shopnames: this.evaluateForm.shopnames }).then(
                (res) => {
                  if (res.code == 200) {
                    this.evaluateForm.id = res.data.id || "";
                  }
                }
              );
              this.evaluate = true;
              this.getpersonOrder();
            } else {
              this.$message.success("取消订单成功");
              this.getpersonOrder();
            }
          }
        });
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(e) {
      this.orderForm.pageNo = e;
      this.getpersonOrder();
    },
    // 获取订单列表
    getpersonOrder() {
      personOrder({
        username: localStorage.getItem("myname"),
        ...this.orderForm,
      }).then((res) => {
        if (res.code == 200) {
          this.total = Number(res.data.total);
          res.data.data.forEach((i) => {
            const date = new Date(i.olderTime);
            const year = date.getFullYear();
            const month = date.getMonth() + 1; // 月份是从0开始计数的，需要加1
            const day = date.getDate();
            const hours = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();
            i.olderTime = `${year}-${month.toString().padStart(2, "0")}-${day
              .toString()
              .padStart(2, "0")} ${hours.toString().padStart(2, "0")}:${minutes
              .toString()
              .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
          });
          this.orderList = res.data.data || [];
        }
      });
    },
    user() {
      this.show = "1";
    },
    capital() {
      this.show = "2";
      this.getpersonMoney();
    },
    order() {
      this.show = "3";
      this.getpersonOrder();
    },
    address() {
      this.show = "4";
      this.getMyaddress();
    },
    RepairReport() {
      this.show = "5";
    },
    // 打开更换银行卡
    changeBank() {
      this.changbank = true;
    },
    // 打开新增地址
    addAddress() {
      this.addressShow = true;
    },
    // 关闭新增地址
    quitaddress() {
      this.addressShow = false;
      this.addressform = {
        name: "",
        address: "",
        phone: "",
      };
    },
    // 选择地址
    choiceAddress(e) {
      changeActives({
        username: localStorage.getItem("myname"),
        ids: e.id,
      }).then((res) => {
        if (res.code == 200) {
          this.getMyaddress();
        }
      });
    },
    //删除地址
    deladdress(e) {
      deleterPerAdd({
        username: localStorage.getItem("myname"),
        id: e.id,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除地址成功");
          this.getMyaddress();
        }
      });
    },
    // 提交新增地址
    submitAddress() {
      if (this.addressform.name == "") {
        this.$message.error("请输入收货人姓名");
      } else if (this.addressform.address == "") {
        this.$message.error("请输入收货人地址");
      } else if (this.addressform.phone == "") {
        this.$message.error("请输入收货人电话");
      } else if (this.addressform.phone.length != 11) {
        this.$message.error("请输入正确的收货人电话");
      } else {
        addPersonAddress({
          username: localStorage.getItem("myname"),
          ...this.addressform,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("新增地址成功");
            this.addressShow = false;
            this.addressform = {
              name: "",
              address: "",
              phone: "",
            };
            this.getMyaddress();
          }
        });
      }
    },
    // 地址列表
    getMyaddress() {
      getMyaddress({
        username: localStorage.getItem("myname"),
      })
        .then((res) => {
          if (res.code == 200) {
            this.addressList = res.data;
          }
        })
        .catch((err) => {
          this.addressList = [];
        });
    },
    // 修改地址
    changeaddress(e) {
      this.receiptShow = true;
      this.receipt = {
        name: e.name,
        phone: e.phone,
        address: e.address,
        id: e.id,
      };
    },
    // 确认修改地址
    surereceipt() {
      if (this.receipt.name == "") {
        this.$message.error("请输入收货人姓名");
      } else if (this.receipt.address == "") {
        this.$message.error("请输入收货地址");
      } else if (this.receipt.phone == "") {
        this.$message.error("请输入收货人电话");
      } else if (this.receipt.phone.length != 11) {
        this.$message.error("请输入正确的收货人电话");
      } else {
        updatePerAddress(this.receipt).then((res) => {
          if (res.code == 200) {
            this.$message.success("修改地址成功");
            this.receipt = {
              name: "",
              phone: "",
              address: "",
              id: "",
            };
            this.receiptShow = false;
            this.getMyaddress();
          }
        });
      }
    },
    // 关闭修改地址
    quitreceipt() {
      this.receiptShow = false;
      this.receipt = {
        name: "",
        phone: "",
        address: "",
        id: "",
      };
    },
    // 关闭更换银行卡
    quitchange() {
      this.changbank = false;
    },
    // 打开充值
    recharge() {
      this.dialogFormVisible1 = true;
    },
    // 关闭充值
    quit1() {
      this.dialogFormVisible1 = false;
    },
    // 确定充值
    // sure1() {},
    // 打开绑定银行卡
    bindBank() {
      this.dialogFormVisible2 = true;
    },
    // 关闭绑定银行卡
    quit2() {
      this.dialogFormVisible2 = false;
    },
    // 更换银行卡
    surechange() {
      const bankCardPattern = /^\d{16,19}$/;
      if (this.changbankForm.bank == "") {
        this.$message.error("请选择银行卡");
      } else if (this.changbankForm.card == "") {
        this.$message.error("请输入银行卡号");
      } else if (!bankCardPattern.test(this.changbankForm.card)) {
        this.$message.error("请输入正确的银行卡号");
      } else {
        changeCard({
          username: localStorage.getItem("myname"),
          bank: this.changbankForm.bank,
          card: this.changbankForm.card,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("更换成功");
            this.changbank = false;
            this.getpersonMoney();
          }
        });
      }
    },
    quitchange() {
      this.changbank = false;
      this.changbankForm = {};
    },
    // 个人信息
    getUser() {
      getUser({ username: localStorage.getItem("myname") })
        .then((res) => {
          this.obj = res.data || {};
          localStorage.setItem("age", this.obj.age);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查询个人余额
    getpersonMoney() {
      personMoney({ username: localStorage.getItem("myname") }).then((res) => {
        res.data.money = parseInt(res.data.money);
        if (res.code == 200) {
          if (res.data.money == NaN) {
            res.data.money = 0;
          }
          this.bank = res.data || {};
          this.money111 = res.data.money;
        } else {
          this.bank = {};
        }
      });
    },

    //更改
    changeVatar() {
      var input = document.querySelector(".input");
      input.click();
    },
    imgchange(e) {
      if (e) {
        this.imgObjs = e.target.files[0];
        this.$nextTick(() => {
          var formData = new FormData();
          formData.append("file", this.imgObjs);
          axios
            .post("http://111.231.22.97:9002/changeAvatar", formData, {
              headers: this.headers,
              params: {
                filename: new Date() + localStorage.getItem("myname"),
                username: localStorage.getItem("myname"),
              },
            })
            .then((res) => {
              if (res.data.code == 200) {
                this.getUser();
              }
            });
        });
      }
    },
    open() {
      this.dialogFormVisible1 = true;
      this.RechargeForm.bank = this.bank.bank;
      this.RechargeForm.card = this.bank.card;
      this.RechargeForm.payword = this.bank.payword;
    },
    // 修改个人信息
    sure() {
      this.form.oldname = localStorage.getItem("myname");
      updatePerson(this.form).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "修改个人信息成功",
            type: "success",
          });
          if (this.form.username) {
            localStorage.setItem("myname", this.form.username);
          }
          this.dialogFormVisible = false;
          this.form = {};
          this.getUser();
          if (this.form.password) {
            this.$router.push({ path: "/userLogin" });
            localStorage.removeItem("myToken");
            localStorage.removeItem("myname");
          }
        } else {
          this.$message({
            message: "修改个人信息失败",
            type: "error",
          });
        }
      });
    },
    sure1() {
      const bankCardPattern = /^\d{16,19}$/;
      if (this.RechargeForm.bank == "") {
        this.$message({ message: "请选择银行", type: "error" });
      } else if (this.RechargeForm.card == "") {
        this.$message({ message: "请输入银行卡号", type: "error" });
      } else if (!bankCardPattern.test(this.RechargeForm.card)) {
        this.$message({ message: "银行卡号格式错误", type: "error" });
      } else if (this.RechargeForm.money == "") {
        this.$message({ message: "请输入金额", type: "error" });
      } else {
        this.innerVisible = true;
      }
    },
    // 绑定银行卡
    sure2() {
      this.bankForm.username = localStorage.getItem("myname");
      const bankCardPattern = /^\d{16,19}$/;
      const paymentPasswordPattern = /^\d{6}$/;
      if (this.bankForm.bank == "") {
        this.$message({ message: "请选择银行", type: "error" });
      } else if (this.bankForm.card == "") {
        this.$message({ message: "请输入银行卡号", type: "error" });
      } else if (!bankCardPattern.test(this.bankForm.card)) {
        this.$message({ message: "银行卡号格式错误", type: "error" });
      } else if (this.bankForm.payword == "") {
        this.$message({ message: "请输入支付密码", type: "error" });
      } else if (!paymentPasswordPattern.test(this.bankForm.payword)) {
        this.$message({ message: "支付密码格式错误", type: "error" });
      } else {
        this.bankForm.money = "0";
        postUsermoney(this.bankForm).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "绑定成功",
              type: "success",
            });
            this.dialogFormVisible2 = false;
            this.bankForm = {};
            this.getpersonMoney();
          } else {
            this.$message({
              message: "绑定失败",
              type: "error",
            });
          }
        });
      }
    },
    // 充值提交
    sure3() {
      this.RechargeForm.username = localStorage.getItem("myname");
      if (this.password == this.RechargeForm.payword) {
        postMoney(this.RechargeForm).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "充值成功",
              type: "success",
            });
            this.dialogFormVisible1 = false;
            this.innerVisible = false;
            this.password = "";
            this.RechargeForm = {};
            this.getpersonMoney();
          }
        });
      } else {
        this.$message({
          message: "支付密码错误",
          type: "error",
        });
      }
    },
    quit() {
      this.dialogFormVisible = false;
      this.form = {};
    },
    quit1() {
      this.dialogFormVisible1 = false;
      this.RechargeForm = {};
    },
    quit2() {
      this.dialogFormVisible2 = false;
      this.bankForm = {};
    },
    quit3() {
      this.innerVisible = false;
      this.password = "";
    },
    loginOut() {
      this.$confirm("确认退出?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message({
          type: "success",
          message: "成功退出!",
        });
        localStorage.removeItem("myToken");
        localStorage.removeItem("myname");
        localStorage.removeItem("age");
        this.$router.push("/userLogin");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.tar {
  width: 20vw;
  height: 80vh;
  border: 1px solid black;
}

.content {
  background-color: #f5f5f5;
  width: 70vw;
  height: 80vh;
  border: 1px solid black;
}

.img {
  width: 14vw;
  height: 14vw;
  border-radius: 50%;
  margin-left: 3vw;
  margin-top: 3vw;
  margin-bottom: 3vw;
}

.phone {
  text-align: center;
  margin-bottom: 3vw;
}

.user {
  display: flex;
  align-items: center;
  width: 100%;
  height: 4vw;
  background-color: #f0e9e9;
  font-size: 20px;
  padding-left: 3vw;
}

.one {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  height: 3vw;
  margin-left: 5%;
  //   margin-right: 3vw;
  border-bottom: 1px solid black;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 40px;
  color: #8c939d;
  width: 240px;
  height: 250px;
  line-height: 240px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader {
  width: 14vw;
  height: 14vw;
  border-radius: 50%;
  border: 1px solid black;
  margin-left: 3vw;
  margin-top: 3vw;
  margin-bottom: 3vw;
}

.bank {
  display: flex;
  align-items: center;
  width: 70%;
  height: 100%;
  justify-content: center; /* 水平居中 */
  border: 1px solid black;
}

::v-deep .el-input--suffix {
  width: 150px;
}

.money {
  border: 1px solid black;
  height: 100%;
  width: 30%;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-evenly; /* 水平居中 */
  flex-direction: column; /* 将主轴方向改为垂直 */
}

.img1 {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

::v-deep .el-radio {
  display: block;
}

.address {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-around;
}
::v-deep .el-input--suffix {
  width: 100%;
}

::v-deep .el-input-group__prepend .el-select {
  width: 150px;
}
</style>
